// useMemo:数据缓存的钩子
// 例：如果不使用useMemo，不管是点击更新按钮，还是更新input都会访问Child，但现在的逻辑是只需要更新input的时候执行复杂计算
import {useMemo, useState } from "react"
function Child({number}){
    let result = useMemo(()=>{
        console.log("访问了Child")
        let result=0;
        for(let i=0;i<10000000;i++){
            result += number*2;
        }
        return result
    },[number])
    return (
    <>
        <div>
            <p>输入的值：{number}</p>
            <p>计算后的值：{result}</p>
        </div>
    </>)
}
export default function UseMemo(){
    const [count,setCount] = useState(0)
    const [number,setNumber] = useState(50)
    const handleDecrement = ()=>{setCount(count+1)}

    return (
        <div style={{padding:10}}>
            <span>更新的值 {count} </span>
            <p></p>
            <button onClick={handleDecrement}>更新</button>
            <p></p>
            <input type="number" value={number} onChange={(e)=>setNumber(e.target.value)}></input>
            <p></p>
            <Child number={number}></Child>
        </div>
    )
}
